<template>
  <div class="footer w-full h-14 box-border pl-2 pr-4 py-2 fixed bottom-0 flex bg-gray-100">
    <div class="flex py-1 text-[#3563e3]">
      <FacePopover />
      <van-icon name="photo-o" size="1.75rem" class="p-1" />
    </div>
    <textarea
      class="!border-0 flex-1 rounded-md ml-2 p-2 leading-6 resize-none"
      placeholder="请输入内容"
      v-model="content"
    />
    <van-button
      type="primary"
      class="!bg-[#3563e3] flex-shrink-0 !text-base !h-auto ml-3 !border-0"
      :disabled="!content"
      @click="emit('send', content)"
    >
      发送
    </van-button>
  </div>
</template>

<script setup lang="ts">
import FacePopover from '@/visitor/components/FacePopover.vue'
import { ref } from 'vue'

const content = ref('')

const emit = defineEmits<{
  send: [string]
}>()
</script>

<style lang="less" scoped>
.footer {
  &::before {
    content: ' ';
    width: 100%;
    height: 1px;
    left: 0;
    top: 0;
    position: absolute;
    background: #ddd;
  }
}
</style>
